<template>
  <Dialog v-model="visible" :title="title" >
    <el-form  :model="form" label-width="auto">
      <div class="flex w-100% h-100%">
        <el-form-item label="字典名称" required class="flex-[1]" style="padding-right: 30px">
          <el-input v-model="form.dictionaryName" />
        </el-form-item>
        <el-form-item label="字典code" required class="flex-[1]" style="padding-right: 30px">
          <el-input v-model="form.dictionaryCode" />
        </el-form-item>
      </div>
      <el-form-item label="是否子级" required>
        <el-radio-group v-model="childrenFlag">
          <el-radio :value="false">否</el-radio>
          <el-radio :value="true">是</el-radio>
        </el-radio-group>
        <div v-if="childrenFlag" style="margin-left: 30px;">
          <el-tag
              v-if="form.parentId"
              @click="selectParent"
              :key="fullPath"
              type="primary"
              size="large"
              effect="light"
              style="cursor: pointer;">
              {{ fullPath }}
          </el-tag>
          <el-button v-else @click="selectParent" type="primary" plain>选择父级目录</el-button>
        </div>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
            v-model="form.remark"
            maxlength="200"
            :rows="3"
            placeholder="备注"
            show-word-limit
            type="textarea"
        />
      </el-form-item>
    </el-form>

    <SelectParent
      ref="SelectParentRef"
      @parentChange="parentChange">
    </SelectParent>
{{form}}
  </Dialog>
</template>



<script setup lang="ts">

  import {ref, unref, nextTick, watch, reactive, computed} from 'vue'
  import type {DictionaryBasicDetail, DictionaryBasicTree} from '@/api/system/dict/types'
  import { Dialog } from "@/components";
  import { ElForm,  ElFormItem, ElInput, ElRadioGroup , ElRadio, ElButton, ElTag} from 'element-plus'
  import SelectParent from './select-parent.vue'
  const visible = ref(true)
  const title = ref('新增')
  const form = ref<DictionaryBasicDetail>()

  const SelectParentRef = ref(typeof SelectParent)
  const initData = () => {
    form.value = {
      id: null,
      dictionaryName: '',  // 字典名称
      dictionaryCode: '',  // 字典code
      parentId: 0,  // 父级id
      path: null,   // 层级路径
      remark: ''    // 父级id
    }
  }
  initData()

  // 是否子级
  const childrenFlag = computed({
    get() {
      return form.value.parentId != 0
    },
    set(val) {
      form.value.parentId = val ? null : 0
      form.value.path = null
    }
  })

  // 路径
  const parentPath = ref('')
  const fullPath = computed({
    get() {
      return parentPath.value + form.value.dictionaryName
    }
  })


  watch(() => form.dictionaryName, (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
  })

  // 选择目录
  const selectParent = () => {
    SelectParentRef.value.openDialog()
  }
  const parentChange = (parentData:DictionaryBasicTree) => {
    form.value.parentId = parentData.id
    parentPath.value = parentData.dictionaryName + '/'
  }


  const openDialog = () => {
    initData()
    visible.value = true
  }

  defineExpose({
    openDialog
  })
</script>
